<template>
	<div class="custom-bread-crumb">
		<Menu mode="horizontal" :theme="'light'" :active-name="activeName">
			<MenuItem :name="index" @click.native="goTo(item,index)" v-for="(item,index) in menuList" :key="index">
				<Icon :type="item.meta.icon" />
				{{item.meta.title}}
			</MenuItem>
		</Menu>
	</div>
</template>
<script>
import './custom-bread-crumb.less';
import { mapMutations } from 'vuex';
export default {
	name: 'customBreadCrumb',
	data() {
		return {
			activeName: 0
		};
	},
	components: {},
	props: {},
	mounted() {
		this.activeName = Number(localStorage.pageType) || 0;
		this.initChooseName();
	},
	computed:{
		menuList (){
			return this.$store.state.app.menuList
		}
	},
	methods: {
		...mapMutations(['setPageNum']),
		goTo(r,i) {
			const t = this;
			t.$router.push({
				path: r.redirect
			});
			t.setPageNum(i);
			localStorage.pageType = i;
		},
		initChooseName(){
			const t = this;
			t.menuList.forEach((m,i)=>{
				if(t.$route.fullPath.indexOf(m.name) !== -1){
					t.activeName = i;
				}
			})
		}
	},
	watch:{
		$route(r){
			const t = this;
			t.initChooseName();
		}
	}
};
</script>
